<template>
  <div>
    <a-row>
      <a-col :span="24">
        已拨打603通电话，目前第158名，距离上一名相差5通。<a-button size="small" type="primary" ghost @click="$router.push({ path: '/calls' })">详情</a-button>
      </a-col>
      <a-col :span="24">
        <v-chart :width="1500" :height="400" :data="data">
          <v-coord type="rect" direction="LB" />
          <v-tooltip />
          <v-axis dataKey="State" :label="label" />
          <v-stack-bar position="State*人口数量" color="年龄段" />
        </v-chart>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { 'State': '新资源', '小于5岁': 25635, '5至13岁': 1890, '14至17岁': 9314 },
  { 'State': '共享库', '小于5岁': 30352, '5至13岁': 20439, '14至17岁': 10225 },
  { 'State': '黄页资源', '小于5岁': 38253, '5至13岁': 42538, '14至17岁': 15757 },
  { 'State': '大客户', '小于5岁': 51896, '5至13岁': 67358, '14至17岁': 18794 },
  { 'State': '售后资源', '小于5岁': 72083, '5至13岁': 85640, '14至17岁': 22153 }
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['小于5岁', '5至13岁', '14至17岁'],
  key: '年龄段',
  value: '人口数量',
  retains: ['State']
})
const data = dv.rows

const label = { offset: 12 }
export default {
  name: 'Customer',
  data () {
    return {
      data,
      height: 400,
      label: label
    }
  }
}
</script>

<style scoped>

</style>
